<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./dist/vue.js"></script>
</head>
<body>
    <!-- 
        vue中的列表渲染：说白了就是for循环的使用
        遍历数组：
            JavaScript中的循环 ：
               for(var i in list) // i表示索引
               for(var item of list) // item表示元素
            但是 在vue中：  都是一样的 of更好
               v-for = "item in list"
               v-for = "item of list"
            那想要在vue的v-for中使用索引怎么办？
               v-for = "(item,index) of list"
        遍历对象
            v-for = "value of obj"
            v-for = "(value,key) of obj"
            v-for = "(value,key,index) of obj"  元素 key 索引
        注意：vue中： 写遍历必写key，key值必须唯一 ，没有唯一时，索引来代替 (索引也不是很好，也会全部渲染)
            减少资源消耗，不用每次都全部渲染，只渲染被修改的
            不加key值的后果：如果已经渲染出li列表，要是在li的末尾再push一条数据，其他的不变，最后一条数据渲染。要是在li的开头再unshift一条数据，所有的数据都重新渲染
            加了key之后，就算是给列表的开头加一条数据，也会只渲染这条数据，其他的不变
        在控制台：vm.list.unshift('ff')时就可以看出区别
        v-for 和 v-if 同时使用时是有优先级的：
            当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级 --- 先循环后判断
            一般不建议 v-for 和 v-if 同时使用
    -->
    <div id="app">
        <ul>
            <li v-for="item of list">{{item}}</li>
        </ul>
        <ul>
            <li  v-for="item of list" :key="item">{{item}}</li>
        </ul>
        <ul>
            <li  v-for="(item,index) of list" :key="index">{{item}}</li>
        </ul>
        <!-- 
            在<template>中使用v-for  , 循环遍历不再是 li 了，而是template
            和上面的是一样的。表示<template>标签是一个空标签，不占用DOM节点
            但是 会报warning:<template> cannot be keyed. Place the key on real elements instead.
            所以 ： 不建议在 <template>上使用遍历
        -->
        <ul>
          <template  v-for="(item,index) of list" :key="index">
            <li>{{item}}</li>
          </template>
        </ul>
    </div>
</body>
<script>
    const vm = new Vue({
        el:'#app',
        data:{
            list:['aa','bb','cc','dd']
        }
    })
</script>
</html>